<template>
  <div>
    <div class="login-container">
      <div class="login-box" style="width: 350px;">
        <div style="font-weight: bold; font-size: 24px; text-align: center; margin-bottom: 30px">登录</div>
        <el-form :model="data.FormData" ref="formRef" :rules="rules">
          <el-form-item prop="userName">
            <el-input prefix-icon="user" v-model="data.FormData.userName" placeholder="请输入账号" />
          </el-form-item>
          <el-form-item prop="passWord">
            <el-input prefix-icon="lock" v-model="data.FormData.passWord" placeholder="请输入密码" />
          </el-form-item>
          <el-button type="primary" style="width: 100%;" @click="login">登录</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>


<script setup>
import { reactive,ref } from "vue";
import request from "@/utils/request";
import { ElMessage } from "element-plus";
import router from "@/router"
import axios from "axios";
import {useStore} from 'vuex'

  const store=useStore()

  const data =reactive({
    FormData:{
      userName:'',
      passWord:''
    }
  })

  //表单校验
  const rules = reactive({
    userName: [
    { required: true, message: '请输入账号', trigger: 'blur' },
  ],
    passWord: [
    { required: true, message: '请输入密码', trigger: 'blur' },
  ],
  })

  const formRef=ref({})


  const login=()=>{
    //必须账号密码都输入
    formRef.value.validate((valid)=>{
      if(valid){
        const formdata = new FormData();
        formdata.append('userName',data.FormData.userName);
        formdata.append('passWord',data.FormData.passWord);
        axios.post('http://localhost:8088/POST/login',formdata).then(res=>{
          if(res.data.success){
            ElMessage.success('登录成功');
            console.log(res)
            //将res里面的数据传进store全局变量里
            store.commit('update_employeeInfo',res.data.data.EmployeeInfo[0])
            //判断登陆的职位，跳至各自的界面
            //boss:1,主管：2，员工：3
            if(res.data.data.EmployeeInfo[0].employee_position==0){
              router.push('/boss')
              return;
            }
            if(res.data.data.EmployeeInfo[0].employee_position>=1&&res.data.data.EmployeeInfo[0].employee_position<=3){
              router.push('/manager')
              return;
            }

            if(res.data.data.EmployeeInfo[0].employee_position>=4&&res.data.data.EmployeeInfo[0].employee_position<=6){
              router.push('/staff')
              return;
            }
            if(res.data.data.EmployeeInfo[0].employee_position==7){
              //TODO:
              router.push('/apprentice')
              return;
            }
          }else{
            ElMessage.error("登录失败")
          }
        })
    
      }
    })
  }
</script>

<style>
.login-container{
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("@/assets/imgs/bg.png");
  background-size: cover;
}

.login-box{
  background-color:rgba(255,255,255,.5);
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  border: 1px solid #ddd;
  padding: 30px;
  border-radius: 5px;
}
</style>